<template>
  <div>
    <n-card title="创建活动">
      <n-form :model="formValue" :rules="rules" ref="formRef" label-placement="left" label-width="120">
        <n-form-item label="活动标题" path="title">
          <n-input v-model:value="formValue.title" placeholder="请输入活动标题" />
        </n-form-item>

        <n-form-item label="活动类别" path="category">
          <n-select v-model:value="formValue.category" :options="categoryOptions" placeholder="请选择类别" />
        </n-form-item>

        <n-form-item label="活动地点" path="location">
          <n-input v-model:value="formValue.location" placeholder="请输入活动地点" />
        </n-form-item>

        <n-form-item label="开始时间" path="startTime">
          <n-date-picker v-model:value="formValue.startTime" type="datetime" style="width: 100%" />
        </n-form-item>

        <n-form-item label="结束时间" path="endTime">
          <n-date-picker v-model:value="formValue.endTime" type="datetime" style="width: 100%" />
        </n-form-item>

        <n-form-item label="最大参与人数">
          <n-input-number v-model:value="formValue.maxParticipants" :min="0" placeholder="0表示不限" style="width: 100%" />
        </n-form-item>

        <n-form-item label="积分奖励" path="pointsReward">
          <n-input-number v-model:value="formValue.pointsReward" :min="1" style="width: 100%" />
        </n-form-item>

        <n-form-item label="活动状态">
          <n-select v-model:value="formValue.status" :options="statusOptions" />
        </n-form-item>

        <n-form-item label="活动描述" path="description">
          <n-input
            v-model:value="formValue.description"
            type="textarea"
            placeholder="请输入活动描述"
            :rows="5"
          />
        </n-form-item>

        <n-form-item>
          <n-space>
            <n-button type="primary" @click="handleSubmit">创建活动</n-button>
            <n-button @click="router.back()">取消</n-button>
          </n-space>
        </n-form-item>
      </n-form>
    </n-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { createActivity } from '@/api/activity'

const router = useRouter()
const userStore = useUserStore()
const formRef = ref(null)

const formValue = reactive({
  title: '',
  category: null,
  location: '',
  startTime: null,
  endTime: null,
  maxParticipants: 0,
  pointsReward: 10,
  status: 'DRAFT',
  description: ''
})

const rules = {
  title: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
  category: [{ required: true, message: '请选择活动类别', trigger: 'change' }],
  location: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
  startTime: [{ required: true, type: 'number', message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, type: 'number', message: '请选择结束时间', trigger: 'change' }],
  pointsReward: [{ required: true, type: 'number', message: '请输入积分奖励', trigger: 'blur' }],
  description: [{ required: true, message: '请输入活动描述', trigger: 'blur' }]
}

const categoryOptions = [
  { label: '环保公益', value: '环保公益' },
  { label: '敬老助老', value: '敬老助老' },
  { label: '教育文化', value: '教育文化' },
  { label: '扶贫济困', value: '扶贫济困' },
  { label: '文明倡导', value: '文明倡导' }
]

const statusOptions = [
  { label: '草稿', value: 'DRAFT' },
  { label: '报名中', value: 'RECRUITING' }
]

const handleSubmit = () => {
  formRef.value?.validate(async (errors) => {
    if (errors) return

    try {
      const data = {
        ...formValue,
        creatorId: userStore.userId,
        startTime: new Date(formValue.startTime).toISOString(),
        endTime: new Date(formValue.endTime).toISOString()
      }
      await createActivity(data)
      window.$message?.success('创建成功')
      router.push('/activity/manage')
    } catch (error) {
      console.error('创建活动失败:', error)
    }
  })
}
</script>

